<template>        
    <Modal
        v-model="modal"
        title="批量商品标签"
        @on-ok="onSave"
        @on-cancel="modal = false">
        <div class="ht400 scroll">
          <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
              <Checkbox v-for="(item, index) in tagArr" :key="index" :disabled='item.disabled' :label="item.id" v-model="item.checked">{{item.name}}</Checkbox>
          </CheckboxGroup>
        </div>
    </Modal>
</template>

<script>
export default {
  props:{
    productIds:Array
  },
  data() {
    return {
      modal: false,
      indeterminate: false,
      checkAll: false,
      checkAllGroup: [],
      tagArr: []
    };
  },
  methods: {
    getTagData() {
      this.indeterminate= false;
      this.checkAll= false;
      this.checkAllGroup= [];
      this.$ajaxPost('/product/common/server/tag/list').then(data => {
        this.tagArr = (data || []).map(item => {
          return {
            id: item.id,
            name: item.name,
            checked: false,
            disabled: false
          }
        })
      })
      this.openModal();
		},
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
    onSave() {
      let param = {
        productIds: this.productIds,
        tagIds: this.checkAllGroup
      }
      this.$ajaxPost('/product/business/update_service_tags', param).then(data =>{
        this.$Notice.success({
          title: '设置成功'
        })
        this.$emit('update');
        this.closeModal();
      })
    },
    checkAllGroupChange(data) {
      if (data.length === 3) {
        this.tagArr.forEach(item => {
          item.disabled = !item.checked
        })
      }
      if (data.length === 2) {
        this.tagArr.forEach(item => {
          item.disabled = false
        })
      }
    }
  }
};
</script>
